<template>
  <div class="slot-body">
    <div class="slot-title " @click="callBack">{{ column.label }}</div>
    <div class="slot-title button" @click="callBack"><label><statistics-slot :ids="content.sjly.id" :column="column.number" /></label></div>
  </div>
</template>

<script>
import StatisticsSlot from './statistics';
import { queryEntity } from '@/api/portal/manager/columnTemp';
export default {
  name: 'VisitingSlot',
  components: { StatisticsSlot },
  props: {
    column: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      content: {}
    };
  },
  watch: {
    column: {
      handler(newData, oldData) {
        this.content = newData;
        this.initEntity(newData.temp);
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    initEntity(id) {
      if (id !== null) {
        queryEntity({ id: id }).then(res => {
          const { data } = res;
          this.call = data;
        });
      }
    },
    callBack() {
      if (this.content.isOpenMore === true) {
        if (this.content.openType === 2 && undefined !== this.content.openUrl && this.content.openUrl !== null) {
          window.open(this.content.path, '_blank');
        } else if (this.content.openType === 1) {
          this.call.columnName = this.column.label;
          this.$emit('fetch-data', this.call);
        } else {
          console.log('');
        }
      }
    }
  }
};
</script>

<style scoped>
.slot-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  padding: 10px 5px;
}
.slot-body:not(:first-child) {
  border-left: 1px solid #E4E7ED;
}
.slot-title {
  width: 100%;
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 21px;
  box-sizing: border-box;
}
.slot-title.button {
  font-weight: 400;
  color: #909399;
  line-height: 21px;
}
</style>
